<template>
  <div class="card-container">

    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <el-button type="primary" @click="rentAreaVisible=true">添加区域</el-button>

    </div>

    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="areaArr">
        <el-table-column type="index" label="序号" />
        <el-table-column label="区域名称" prop="areaName" />
        <el-table-column label="车位数（个）" prop="spaceNumber" />
        <el-table-column label="面积（㎡）" prop="areaProportion" />
        <el-table-column label="计费规则" prop="ruleName" />
        <el-table-column label="备注" prop="remark" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-button size="mini" type="text" @click="putWriteArea(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="delArea(scope.row.id)">删除</el-button>

          </template>

        </el-table-column>

      </el-table>

    </div>

    <div class="page-container">
      <el-pagination
        layout="total, prev, pager, next"
        :total="total"
        @current-change="pageChange"
      />
    </div>

    <!-- 添加区域 -->
    <el-dialog
      :title="titel==='添加区域' ? '添加区域' : '编辑区域' "
      :visible="rentAreaVisible"
      width="580px"
      @click="rentAreaVisible=false"
    >
      <!-- 表单区域 -->
      <div class="form-container" />
      <el-form ref="areaForm" :model="areaForm" :rules="areaRules" label-position="top">
        <el-form-item label="区域名称" prop="areaName">
          <el-input v-model="areaForm.areaName" placeholder="请输入区域名称" />
        </el-form-item>
        <el-form-item label="车位数（个）" prop="spaceNumber">
          <el-input v-model="areaForm.spaceNumber" placeholder="请输入车位个数" />
        </el-form-item>
        <el-form-item label="面积（㎡）" prop="areaProportion">
          <el-input v-model="areaForm.areaProportion" placeholder="请输入面积" />
        </el-form-item>
        <el-form-item label="关于计费规则" prop="ruleId">
          <el-select v-model="areaForm.ruleId" placeholder="请选择">
            <el-option
              v-for="item in ruleNameList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注 " prop="remark">
          <el-input v-model="areaForm.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="mini" @click="rentAreaVisible=false">取 消</el-button>

        <el-button size="mini" type="primary" @click="addAreaList">确 定</el-button>

      </template>

    </el-dialog>

  </div>

</template>

<script>
import { getQuYuAPI, getAddAPI, writerAddAPI, delAreaAPI } from '@/api/cararea'
export default {
  data() {
    return {
      titel: '添加区域',
      rowId: null,
      areaList: {
        page: 1,
        pageSize: 10
      },
      areaForm: {
        areaName: '', // 区域名称
        spaceNumber: '', // 车位数
        areaProportion: '', // 面积
        ruleId: '', // 计费规则
        remark: '' // 备注
      },
      areaRules: {
        areaName: [
          { required: true, message: '区域名称为必填', trigger: 'blur' }
        ],
        spaceNumber: [
          { required: true, message: '车位数为必填', trigger: 'blur' }
        ],
        areaProportion: [
          { required: true, message: '面积为必填', trigger: 'blur' }
        ],
        ruleId: [
          { required: true, message: '计费规则为必填', trigger: 'change' }
        ]
      },
      // 计费选项
      ruleNameList: [
        { id: 1,
          name: '按分钟计费'

        },
        {
          id: 2,
          name: '按小时计费'
        },
        {
          id: 3,
          name: '按次收费'
        },
        {
          id: 4,
          name: '分段计费'
        }

      ],
      total: 0,
      areaArr: [],
      rentAreaVisible: false
    }
  },
  created() {
    this.getAreaList()
  },
  methods: {
    async  getAreaList() {
      const res = await getQuYuAPI(this.areaList)
      // console.log(res)
      this.areaArr = res.data.rows
      this.total = res.data.total
    },
    pageChange(page) {
      this.areaList.page = page
      this.getAreaList()
    },
    addAreaList() {
      this.$refs.areaForm.validate(async valid => {
        if (valid) {
          if (this.titel === '添加区域') {
            const res = await getAddAPI(this.areaForm)
            console.log(res)
            this.$message.success('添加成功')
          } else {
            await writerAddAPI({
              ...this.areaForm,
              id: this.rowId
            })
            this.$message.success('编辑成功')
          }
          // 清空表单
          this.areaForm = {
            areaName: '', // 区域名称
            spaceNumber: '', // 车位数
            areaProportion: '', // 面积
            ruleId: '', // 计费规则
            remark: '' // 备注
          }
          this.rowId = null
          this.rentAreaVisible = false
          this.getAreaList()
        }
      })
    },
    putWriteArea(row) {
      this.rentAreaVisible = true
      this.titel = '编辑区域'
      // console.log(row)
      this.areaForm.areaName = row.areaName
      this.areaForm.spaceNumber = row.spaceNumber
      this.areaForm.areaProportion = row.areaProportion
      this.areaForm.ruleId = row.ruleId
      this.areaForm.remark = row.remark
      this.rowId = row.id
    },
    delArea(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // console.log(id)
        await delAreaAPI(id)
        this.$message.success('删除成功')
        this.getAreaList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;
  .search-main {
    width: 220px;
    margin-right: 10px;
  }
  .search-btn{
    margin-left:20px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
</style>
